<!DOCTYPE html>
<html lang="en">
<head>

    <!--toolbar-添加和批量删除选项按钮-->
    <div class="row" id="tableToolBar">
        <button type="button" class="btn btn-info" id="toolbarAdd">添加人员</button>
    </div>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../bootstrap/css/bootstrap.min.css" rel="stylesheet" />
    <title></title>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
    <link href="../bootstrap-table/bootstrap-table.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="../bootstrap-select-1.13.14/dist/css/bootstrap-select.css">
    <link rel="stylesheet" href="../toastr/toastr.min.css">
    <link rel="stylesheet" href="../bootstrapvalidator-aae9288/dist/css/bootstrapValidator.css">
    <title>人员管理</title>

</head>
<body>
<!--添加人员信息的模态框-->
<div class="modal fade" id="ModalForAdd" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h4 class="modal-title" id="myModalLabelForAdd">
                    添加人员信息
                </h4>
            </div>
            <div class="modal-body" id="TipForgotohome">
                <form id="gotohomeForm">
                    <div class="form-group">
                        <label for="em_name">姓名</label>
                        <input type="text" class="form-control" id="em_name" name="em_name" placeholder="请输入姓名">
                    </div>
                    <div class="form-group">
                        <label for="em_idcard">身份证</label>
                        <input type="text" class="form-control" id="em_idcard" name="em_idcard" placeholder="请输入身份证">
                    </div>
                    <div class="form-group">
                        <label for="em_phone">电话</label>
                        <input type="text" class="form-control" id="em_phone" name="em_phone" placeholder="请输入电话">
                    </div>
                    <div class="form-group">
                        <label for="em_enjobtime">入职时间</label>
                        <input type="text" class="form-control" id="em_enjobtime" name="em_enjobtime" placeholder="请输入入职时间">
                    </div>
                    <div class="form-group">
                        <label for="em_address">家庭住址</label>
                        <input type="text" class="form-control" id="em_address" name="em_address" placeholder="请输入家庭住址">
                    </div>
                    <div class="text-right">
                        <span id="returnMessage" class="glyphicon"> </span>
                        <button type="button" class="btn btn-default right" data-dismiss="modal">关闭</button>
                        <button id="Comfirmaddemp" type="button" class="btn btn-primary">办理</button>

                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


        <table id="data-table"></table>

    <script src="../jquery/jquery-3.4.1.min.js"></script>
    <script src="../bootstrap/js/bootstrap.js"></script>
    <script src="../bootstrap-table/bootstrap-table.min.js"></script>
    <script src="../bootstrap-select-1.13.14/dist/js/bootstrap-select.js"></script>
    <script src="../bootstrap-table/locale/bootstrap-table-zh-CN.js"></script>
    <script src="../toastr/toastr.min.js"></script>
    <script src="../jquery-validation/jquery.validate.js"></script>
    <script src="../jquery-validation/messages_zh.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/bootstrapValidator.js"></script>
    <script src="../bootstrapvalidator-aae9288/dist/js/language/zh_CN.js"></script>
    <script>

        $(document).ready(function () {
            initTable();
            function initTable() {
                //让bookstraptable销毁
                $("#data-table").bootstrapTable("destroy");
                $("#data-table").bootstrapTable({
                    url: "../employee/selectAll",
                    method: 'post', //请求方式（*）
                    toolbar: '#toolbarAdd,#deleteMore',            //工具按钮用哪个容器
                    striped: true, //是否显示行间隔色
                    cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                    pagination: true, //是否显示分页（*）
                    sortable: true, //是否启用排序
                    sortOrder: "asc", //排序方式
                    sidePagination: "client", //分页方式：client客户端分页，server服务端分页（*）
                    pageNumber: 1, //初始化加载第一页，默认第一页,并记录
                    pageSize: 5, //每页的记录行数（*）
                    pageList: [10, 20, 50, 100], //可供选择的每页的行数（*）
                    search: true, //是否显示表格搜索,模糊查询
                    strictSearch: false,//精确查询
                    // silent : true,// 刷新事件必须设置
                    showColumns: true, //是否显示所有的列（选择显示的列）
                    showRefresh: true, //是否显示刷新按钮
                    minimumCountColumns: 2, //最少允许的列数
                    clickToSelect: true, //是否启用点击选中行
                    //height: 1000,                      //表格高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                    uniqueId: "uInfo_id", //每一行的唯一标识，一般为主键列
                    showToggle: false, //是否显示详细视图和列表视图的切换按钮
                    cardView: false, //是否显示详细视图
                    detailView: false, //是否显示父子表
                    clickToSelect: true,    //是否启用点击选中行
                    // queryParams: queryParams,
                    columns: [

                        {
                            checkbox: true,

                        },
                        {
                            field: 'em_name',//JSon数据中的相应的key
                            title: '员工姓名',//表头信息
                            sortable: true,

                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'em_idcard',
                            title: '身份证',
                            sortable: true,

                            align: 'center',
                            valign: 'middle',

                        },
                        {
                            field: 'em_phone',
                            title: '电话',
                            sortable: true,
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'em_enjobtime',
                            title: '入职时间',
                            sortable: true,
                            align: 'center',
                            valign: 'middle',
                        },
                        {
                            field: 'em_address',
                            title: '家庭住址',
                            align: 'center',
                            sortable: true,
                            valign: 'middle',
                        },
                        {
                            title: '操作',
                            align: 'center',
                            valign: 'middle',
                            width: 150,
                            events: operateEvents,
                            formatter: function (e,value, row, index) {
                                return "<button class='btn btn-info updateGuest'><i class='fa fa-pencil-square-o' aria-hidden='true'></i> 完善信息</button>";

                            }
                        }
                    ],
                    onLoadSuccess: function (res) {
                        console.log(res);
                        //复选框的居中样式
                        $(".bs-checkbox").css({"text-align": 'center', "vertical-align": "middle"});
                    }, onLoadError: function (statusCode) {
                        return "加载失败了"
                    }, formatLoadingMessage: function () {
                        //正在加载
                        return "拼命加载中...";
                    }, formatNoMatches: function () {
                        //没有匹配的结果
                        return '无符合条件的记录';
                    }
                });
            }


            //添加模态框
            $("#toolbarAdd").click(function () {
                $("#myModalLabelForAdd").text("添加人员");
                $("#ModalForAdd").modal("show");

            });

            $("#Comfirmaddemp").click(function () {
                $.ajax({
                    url:"/employee/insertEmployee",
                    datatype:"json",
                    type:"post",
                    data:{
                        em_name:$("#em_name").val(),
                        em_idcard: $("#em_idcard").val(),
                        em_phone: $("#em_phone").val(),
                        em_enjobtime: $("#em_enjobtime").val(),
                        em_address: $("#em_address").val(),
                    },
                    success:function (result) {
                        if(result.errorCode==0){
                            $("#ModalForAdd").modal("hide");
                            initTable();
                            //刷新后出一个提示框
                            toastr.success(result.status);
                        }else if(result.errorCode==-1){
                            toastr.error(result.status);
                        }
                    }
                })
            });


            //当模态框关闭时，清空模态框数据
            $('#ModalForAdd').on('hidden.bs.modal', function () {
                clearModelData();
            })
            //清空模态框数据
            function clearModelData() {
                $("#em_name").val("");
                $("#em_idcard").val("");
                $("#em_phone").val("");
                $("#em_enjobtime").val("");
                $("#em_address").val("");

            }
            $('#ModalForAdd').on('hidden.bs.modal', function () {
                clearModelData();
            })



        });//jq完=================================================================================================
        window.operateEvents = {
            'click .updateGuest': function (e, value, row, index) {

                $.ajax({
                    url:"/employee/setEmpMessage",
                    datatype:"json",
                    type:"post",
                    data:{
                        em_id:row.em_id,
                        em_name:row.em_name,
                        em_idcard:row.em_idcard,
                        em_address:row.em_address,
                        em_phone:row.em_phone,
                        em_enjobtime:row.em_enjobtime,
                    }
                });

                $(location).attr("href","/gotoemployee_info?em_id="+row.em_id);

            }

        };




    </script>


</body>
</html>